<template>
  <div class="info">

     <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @after-enter="afterEnter">
        <div class="ball"  ref="ball" v-show="flag"></div>
      </transition>
    <!-- 商品轮播图 -->
      <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						    <mt-swipe :auto="3000">
                  <mt-swipe-item><img src="../../img/1.jpg" width="100%" ></mt-swipe-item>
                  <mt-swipe-item><img src="../../img/2.jpg" width="100%" ></mt-swipe-item>
                  <mt-swipe-item><img src="../../img/3.jpg" width="100%" ></mt-swipe-item>
                </mt-swipe>
					</div>
				</div>
			</div>

    <!-- 商品 -->
      <div class="mui-card">
				<div class="mui-card-header">商品价格</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
              市场价：<del>￥6999</del> &nbsp;&nbsp;&nbsp; 销售价：<span class="now_price">5999</span>
            </p>
            购买数量：  <div>
                          <div class="mui-numbox" data-numbox-min='1' data-numbox-max='9'>
                            <button class="mui-btn mui-btn-numbox-minus" type="button" @click="substract">-</button>
                            <input id="test" class="mui-input-numbox" type="number" v-model="value" />
                            <button class="mui-btn mui-btn-numbox-plus" type="button" @click="add">+</button>
                          </div>
                        </div>


            <div class="shop_button">

              <mt-button type="primary" size="small">立即购买</mt-button>
              <mt-button type="danger" size="small" @click="shopcar">加入购物车</mt-button>
            </div>
					</div>
				</div>
			</div>

    <!-- 商品信息 -->

      <div class="mui-card">
          <div class="mui-card-header">商品参数</div>
          <div class="mui-card-content">
            <div class="mui-card-content-inner">
              <p>商品货号：</p>
              <p>库存情况：</p>
              <p>上架时间：</p>
            </div>
          </div>
          <div class="mui-card-footer">
            <mt-button type="primary" size="large" plain>图文介绍</mt-button>
            <mt-button type="danger" size="large" plain>商品评论</mt-button>
          </div>
        </div>
      </div>
</template>

<script>

  // import numbox from './numbox.vue'
export default {
  data(){
    return{
      value: 1,
      flag: false
    }
  },
  // components:{
  //   numbox
  // },
  methods:{
    substract(){
      this.value--
    },
    add(){
      this.value++
    },
    shopcar(){
      this.flag = !this.flag
    },
    beforeEnter(el){
      el.style.transform = "translate(0,0)"
    },
    enter(el,done){

      const ballPosition = this.$refs.ball.getBoundingClientRect();
      console.log(ballPosition)

      const badge = document.getElementById('badge').getBoundingClientRect();
      console.log(badge)

      const xDist = badge.left - ballPosition.left;
      const yDist = badge.top - ballPosition.top;
      console.log(xDist)
      console.log(yDist)

      el.offsetWidth;
      el.style.transform = 'translate(85px, 239px)';
      el.style.transition = "all 0.5s cubic-bezier(.4 , -0.3 ,1 ,.68)";
      done();
    },
    afterEnter(el){
      this.flag = !this.flag
    },


  }
}
</script>

<style scoped>

.info{
  background-color: #eee;
  overflow: hidden;
  position: relative;
}
.mint-swipe{
  height: 203px;
}
.mint-swipe-item:nth-child(1){
  background-color: red;
}
.mint-swipe-item:nth-child(2){
  background-color: yellow;
}
.mint-swipe-item:nth-child(3){
  background-color: blue;
}
.now_price{
  color: red;
  font-weight: bold;
}
.mui-card-footer{
  display: block;

}
.mui-card-footer .mint-button{
    margin-top: 15px;
}
p{
  height: 25px;
}
.shop_button{
  padding-top: 5px;

}
.ball{
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: 346px;
  left: 152px;
  z-index: 99;
  transform: translate(93px,230px)
}


</style>


